<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item prop="date">
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>

<script>
import TableSearch from '@/components/TableSearch'
import { logPage } from '@/api/log'
export default {
  name: 'LogList',
  components: {
    TableSearch,
  },
  data() {
    return {
      options: [],
      loading: true,
      form: {
        startTime:
          new Date(
            new Date(new Date().toLocaleDateString()).getTime()
          ).valueOf() -
          30 * 24 * 3600 * 1000,
        endTime:
          new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1,
      },
      searchPath: '/web/log-management/log-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'mobile',
          placeholder: '用户手机号',
          clearable: true,
        },
        {
          type: 'text',
          value: 'action',
          placeholder: '用户操作',
          clearable: true,
        },
        {
          slot: 'date',
        },
      ],
      tableData: {},
      columns: [
        {
          label: '用户手机号',
          prop: 'mobile',
          resourceId: '/web/log-management/log-management/用户手机号',
        },
        {
          label: '用户操作',
          prop: 'action',
          resourceId: '/web/log-management/log-management/操作时间',
        },
        {
          label: '操作时间',
          prop: 'visitTime',
          width: '200px',
          resourceId: '/web/log-management/log-management/操作时间',
        },
        {
          label: '操作IP',
          prop: 'ip',
          resourceId: '/web/log-management/log-management/操作IP',
        },
        {
          label: 'url',
          prop: 'url',
          resourceId: '/web/log-management/log-management/url',
        },
        {
          label: '详情',
          prop: 'body',
          formatter: (row) => {
            return JSON.parse(row.body).length === 0 ? '' : row.body
          },
          resourceId: '/web/log-management/log-management/详情',
        },
      ],
    }
  },
  async created() {},
  computed: {
    diableDate() {
      return { range: 24 * 3600 * 180 * 1000 }
    },
  },
  methods: {
    reset() {
      this.form = {
        startTime:
          new Date(
            new Date(new Date().toLocaleDateString()).getTime()
          ).valueOf() -
          30 * 24 * 3600 * 1000,
        endTime:
          new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1,
      }
    },
    handleTableData(params) {
      this.loading = true
      logPage(params).then(
        (res) => {
          this.loading = false
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        },
        () => {
          this.loading = false
        }
      )
    },
  },
}
</script>
